<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        jQuery(function() {
            var maxCols = 2;
            var maxRows = 2;

            jQuery('#myTable td').hover(function() {
                colIndex = jQuery(this).index();
                rowIndex = jQuery(this).parent().index();

                jQuery('#myTable td').removeClass('selected');

                for (var x = 0; x <= colIndex; x++) {
                    for (var y = 0; y <= rowIndex; y++) {
                        jQuery(this).parent().parent().children().eq(y).children().eq(x).addClass('selected');
                    }
                }

                if((colIndex+1) == maxCols && colIndex<4) {
                    jQuery('#myTable tr td:last-child').after(jQuery(this).clone(true));
                    maxCols = maxCols + 1;
                }

                if((rowIndex+1) == maxRows &&rowIndex<4) {
                    jQuery('#myTable tbody>tr:last').clone(true).insertAfter('#myTable tbody>tr:last');
                    maxRows = maxRows + 1;
                }

                var size = (rowIndex+1) + " X " + (colIndex+1);
                jQuery('#selectSize').html(size);

            }, function() {

            });

            jQuery('#myTable td').click(function() {
                jQuery('#myTable td').unbind('mouseenter').unbind('mouseleave');
                showSeries(colIndex+1, rowIndex+1);
                jQuery('#contentDiv').hide();
            });

            // 调整窗口位置
            if($('#toolbar-function')[0].style.display == 'none'){
                var leftPos = $('#grid_in_simple').offset().left;
                var topPos = $('#grid_in_simple').offset().top;
                var toolbarHeight = $('#grid_in_simple').height();
                topPos += (toolbarHeight+2);
            } else {
                leftPos = $('#grid').offset().left;
                topPos = $('#grid').offset().top;
                toolbarHeight = $('#grid').height();
                topPos += (toolbarHeight+2);
            }


            $('#myTable').parent().css('position','fixed');
            $('#myTable').parent().css('left',leftPos + 'px');
            $('#myTable').parent().css('top',topPos + 'px');

        });

    </script>

    <style>
        #myTable tr td {
            border: 1px solid grey;
            padding: 7px;
        }

        #myTable tr td.selected {
            /*background-color: rgb(200, 200, 255); */
            background-color: #000;
        }
        #myTable {
            border-collapse: collapse;
        }
    </style>
</head>
<body>

<div
        style="display: inline-block; background-color: #EEE; border: 1px solid #BBB;">

    <table id="myTable">
        <tr>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

    <div id="selectSize" align="center"
         style="border: 1px solid #BBB; color: #000; font-weight: bold; font-size: 12px;"></div>
</div>
</body>
</html>